<script setup lang="ts">
import Tree from "./tree/index.vue";
import Attr from "./attr/index.vue";
import Shape from "./shape/index.vue";
import Bodies from "./bodies/index.vue";
import Coordinate from "./coordinate/index.vue";
import { IItem } from "./tree/type";
import { init, destory } from "./create";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { start } from "./game/Game";
import { useLayout } from "@/stores/layout";
import { Bus, G2V_SELECTED, G2V_SIZE, G2V_TREE, V2G_SELECTED } from "./game/Bus";
const canvas = ref<any>(null);
const list = ref<IItem[]>([]);
const layout = useLayout();
const obj = ref<any>({});
const size = ref<any>(null);

onMounted(() => {
   
    start(canvas.value);
    Bus.on(G2V_TREE, (val: any) => {
        list.value = val;
    });

    Bus.on(G2V_SELECTED, (val: any) => {
        console.log("change object", val);
        obj.value = val || {};
        if (val) {
            openTree(val.id);
        }
    });

    Bus.on(G2V_SIZE, (val: any) => {
        if (val) {
            let { x, y, z } = val;
            size.value = { x, y, z };
        } else {
            size.value = null;
        }
    });
});

function openTree(id: number) {
    treeCall(list.value, (i: IItem) => {
        i.active = i.id == id;
    });
    console.log("open tree");

    let ps = getPath(list.value, id, []);
    if (ps && ps.length > 1) {
        for (let i = ps.length - 1; i > 0; i--) {
            let subArray = [];
            for (let j = 0; j < i; j++) {
                subArray.push(ps[j]);
            }
            // console.log(subArray);
            let item: any = getObj(list.value, subArray);
            item.expand = true;
        }
    }
}

const onToggle = (obj: IItem) => {
    console.log("root onToggle", obj);
    obj.expand = !obj.expand;
    // list.value.pop();
    Bus.emit(V2G_SELECTED, obj.id);

    treeCall(list.value, (i: IItem) => {
        i.active = i == obj;
    });

    let ps = getPath(list.value, obj.id, []);
    let item: any = getObj(list.value, ps);
    item.active = true;
    console.log(item, "aim ======", ps);
};

const onSelected = (obj: any) => {
    console.log("root onSelected", obj);
    obj.selected = !obj.selected;
    if (obj.children) {
        treeCall(obj.children, (i: IItem) => {
            i.selected = obj.selected;
        });
    }

    let ps = getPath(list.value, obj.id, []);

    if (ps && ps.length > 1) {
        for (let i = ps.length - 1; i > 0; i--) {
            let subArray = [];
            for (let j = 0; j < i; j++) {
                subArray.push(ps[j]);
            }
            console.log(subArray);
            let item: any = getObj(list.value, subArray);
            // console.log("find", item)
            item.selected = item.children.every((t: any) => t.selected);
        }
    }
};

function getObj(menu: IItem[], ps: number[]) {
    // console.log("--ps", ps)
    let item: any = menu;
    for (let i = 0; i < ps.length; i++) {
        if (Array.isArray(item)) {
            item = item[ps[i]];
        } else {
            item = item.children[ps[i]];
        }
    }
    return item;
}

function getPath(menu: IItem[], id: number, path: number[] = []) {
    for (let i = 0; i < menu.length; i++) {
        const item = menu[i];
        if (item.id === id) {
            return [...path, i];
        }

        if (item.children) {
            const childPath: any = getPath(item.children, id, [...path, i]);
            if (childPath) {
                return childPath;
            }
        }
    }

    return null;
}

function treeCall(menu: IItem[], fun: Function) {
    for (const item of menu) {
        fun(item);
        if (item.children) {
            treeCall(item.children, fun);
        }
    }
}

function onTreeDown(e: MouseEvent) {
    layout.startHierarchyDrag(e.clientX);
}

function onAttrDown(e: MouseEvent) {
    layout.startAttrDrag(e.clientX);
}

function leftToggle() {
    console.log("left");
    layout.toggleHierarchyExpand();
}

function rightToggle() {
    console.log("right");
    layout.toggleAttrExpand();
}
</script>

<template>
    <div class="page">
        <canvas ref="canvas"></canvas>
        <div class="box b-left" :class="{ min: !layout.hierarchy.expand }" :style="{ width: layout.hierarchy.width + 'px' }">
            <div class="p-title">层级</div>
            <div class="p-content">
                <Tree :list="list" :level="0" @selected="onSelected" @toggle="onToggle"></Tree>
            </div>
            <div class="line" @mousedown="onTreeDown"></div>
            <div class="tog-btn" @click="leftToggle" :class="{ sm: !layout.hierarchy.expand }" :style="{ left: layout.hierarchy.width + 'px' }"></div>
        </div>

        <div class="box b-right" :class="{ min: !layout.attr.expand }" :style="{ width: layout.attr.width + 'px' }">
            <div class="p-title">属性</div>
            <div class="p-content">
                <Attr :obj="obj" :size="size"></Attr>
            </div>
            <div class="line" @mousedown="onAttrDown"></div>
            <div class="tog-btn" @click="rightToggle" :class="{ sm: !layout.attr.expand }" :style="{ right: layout.attr.width + 'px' }"></div>
        </div>
        <Shape></Shape>
        <Bodies></Bodies>
        <Coordinate></Coordinate>
    </div>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
